/**
 * 添加编辑车辆排队
 * @author xiaoxujs
 */

import { FC, useCallback, useEffect, useState } from "react";
import { IBaseSortAddForm, IWSDataSortList } from "../../../../type/cheliangpaidui";
import { Form, Input, message, Modal, Select, Space } from "antd";
import { postBaseSortAdd, postBaseSortUpdate } from "../../api";
import { ISelectList } from "../../../../type/antd";
import { getBaseLaneList } from "../../../Chedaoweihu/api";
import { INoFenye } from "../../../../type/commit";
import { IBaseLaneList } from "../../../../type/chedaoweihu";
import { Hongdian } from "../../style";

const DengjiAddChangeModule: FC<{
  open: boolean;
  clickData?: IWSDataSortList;
  handleCallback: () => void;
  carColorList: ISelectList[];
  setListLoading: React.Dispatch<React.SetStateAction<boolean>>;
  chedaoId?: string;
}> = ({
  open,
  clickData,
  handleCallback,
  carColorList,
  setListLoading,
  chedaoId

}) => {
    const [form] = Form.useForm<IBaseSortAddForm>();
    const { validateFields, resetFields, setFieldsValue } = form;

    const [listData, setListData] = useState<IBaseLaneList[]>([]);

    const listFun = useCallback(async () => {
      const { code, msg, data } = (await getBaseLaneList()) as INoFenye<IBaseLaneList>;
      if (code === 20000) {
        setListData(data);
        console.log(data);
        
      } else {
        message.error(msg);
      }
    }, []);
    useEffect(() => {
      listFun();
      if (clickData && chedaoId) {
        setFieldsValue(clickData)
        setFieldsValue({
          laneId: chedaoId
        })
      }
    }, [chedaoId, clickData, listFun, setFieldsValue])

    const handleOk = async () => {
      const values = await validateFields();
      setListLoading(true)
      if (clickData) {
        const params = {
          id: clickData.id,
          ...values
        }
        const { code, msg } = await postBaseSortUpdate(params) as { code: number, msg: string };
        if (code === 20000) {
          message.success('修改成功')
          resetFields()
          handleCallback();
        } else {
          message.error(msg)
          setListLoading(false);
        }
      } else {
        const { code, msg } = await postBaseSortAdd(values) as { code: number, msg: string };
        if (code === 20000) {
          message.success('修改成功')
          resetFields()
          handleCallback();
        } else {
          message.error(msg)
          setListLoading(false);
        }
      }

    };

    const handleCancel = () => {
      resetFields()
      handleCallback()
    };
    return <Modal title={clickData ? '编辑车辆信息' : '排队登记'} open={open} onOk={handleOk} onCancel={handleCancel}>
      <Form
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 14 }}
        form={form}
        initialValues={{
          plateColor: '黄'
        }}
      >
        <Form.Item label={
          <span>
            <Hongdian>*</Hongdian>
            <span>车牌号</span>
          </span>
        }>
          <Space.Compact>
            <Form.Item<IBaseSortAddForm >
              name='plateColor'
              noStyle
              rules={[{ required: true, message: '请选择车牌颜色!' },]}
            >
              <Select style={{ width: '10rem' }} options={carColorList} />
            </Form.Item>
            <Form.Item<IBaseSortAddForm >
              name='licensePlate'
              noStyle
              rules={[{ required: true, message: '请输入车牌号!' },]}
            >
              <Input style={{ width: '100%' }}  placeholder="请输入车牌号!" />
            </Form.Item>
          </Space.Compact>
        </Form.Item>
        <Form.Item<IBaseSortAddForm>
          label="车道号"
          name="laneId"
          rules={[{ required: true, message: '请选择车道号!' }]}
        >
          <Select options={listData} fieldNames={{
            label: 'laneName',
            value: 'laneId'
          }} />
        </Form.Item>
      </Form>
    </Modal>
  }

export default DengjiAddChangeModule;